.search {
  .s-header {
    box-sizing: border-box;
    padding   : 0 28rpx;
    background: white;

    .h-top {
      display    : flex;
      align-items: center;
      height     : 88rpx;

      .t-search {
        display      : flex;
        align-items  : center;
        flex         : 1;
        height       : 60rpx;
        border-radius: 8rpx;
        background   : #f4f4f4;

        text {
          flex-basis : 65rpx;
          text-align : center;
          line-height: 60rpx;
          color      : #999;
        }

        input {
          flex      : 1;
          border    : none;
          outline   : none;
          background: #f4f4f4;

          &::-webkit-search-cancel-button {
            display: none;
          }
        }

        .clear {
          flex-basis : 65rpx;
          text-align : center;
          line-height: 60rpx;
          font-size  : 40rpx;
          color      : #999;
        }
      }

      .t-right {
        display        : flex;
        justify-content: flex-end;
        flex-basis     : 85rpx;

        text {
          color: #666;
        }
      }
    }

    .h-bottom {
      display    : flex;
      align-items: center;
      height     : 88rpx;

      .b-item {
        display        : flex;
        align-items    : center;
        justify-content: center;
        flex           : 1;
        color          : #666;

        .i-icon {
          display       : flex;
          flex-direction: column;
          align-items   : center;
          padding-left  : 10rpx;

          text {
            font-size: 20rpx;
          }

          &-down {
            text {
              &:last-child {
                color: #b4282d;
              }
            }
          }
        }

        &-active {
          .i-text {
            text {
              color: #9e0000;
            }
          }
        }
      }
    }
  }

  .s-main {
    flex: 1;

    .__m-section {
      background: #f4f4f4;

      .sec-header {
        display        : flex;
        justify-content: space-between;
        height         : 75rpx;
        padding        : 0 28rpx;

        .h-left {
          display    : flex;
          align-items: center;

          text {
            color: #666;
          }
        }

        .h-right {
          display    : flex;
          align-items: center;

          text {
            font-size: 40rpx;
            color    : #666;
          }
        }
      }

      .sec-content {
        padding   : 34rpx 28rpx 52rpx 28rpx;
        background: white;
      }
    }

    .m-history {
      .__m-section {
        .sec-content {
          .h-hot {
            display  : flex;
            flex-wrap: wrap;

            text {
              flex-grow    : 0;
              height       : 50rpx;
              line-height  : 50rpx;
              padding      : 0 22rpx;
              margin       : 0 20rpx 20rpx 0;
              border-radius: 5rpx;
              background   : @body-background;
              color        : #666;
            }
          }

          .h-history {
            display  : flex;
            flex-wrap: wrap;

            text {
              flex-grow    : 0;
              height       : 50rpx;
              line-height  : 50rpx;
              padding      : 0 22rpx;
              margin       : 0 20rpx 20rpx 0;
              box-sizing   : border-box;
              border-radius: 5rpx;
              border       : 1px solid @border-color-split;
              color        : #666;
            }
          }
        }
      }
    }

    .m-favour {
      .__m-section {

        .sec-content {
          .f-recommend {

            .r-item {
              display: flex;

              .i-pic {
                flex-basis: 110rpx;
                height    : 110rpx;
              }

              .i-info {
                display        : flex;
                flex-direction : column;
                justify-content: center;
                flex           : 1;
                padding        : 0 20rpx;

                .i-name {
                  display      : inline-block;
                  width        : 100%;
                  height       : 40rpx;
                  line-height  : 40rpx;
                  color        : #333;
                  overflow     : hidden;
                  text-overflow: ellipsis;
                }

                .i-price {
                  padding-top: 10rpx;
                  color      : #666;
                }
              }

              .i-buy {
                display    : flex;
                align-items: center;
                flex-grow  : 0;

                text {
                  color: @primary-color
                }

                .iconfont {
                  font-size: 40rpx;
                }
              }

              &:not(:first-child) {
                margin-top: 10rpx;
              }
            }
          }

          .f-hot {
            .h-item {
              display        : flex;
              justify-content: space-between;
              height         : 88rpx;

              &:not(:first-child) {
                position: relative;

                &::before {
                  position  : absolute;
                  content   : '';
                  top       : 0;
                  left      : 0;
                  width     : 100%;
                  height    : 0;
                  border-top: 1px solid @border-color-split;
                  transform : scaleY(0.5);
                }
              }

              .i-left {
                display    : flex;
                align-items: center;

                text {
                  display      : inline-block;
                  width        : 100%;
                  height       : 60rpx;
                  line-height  : 30rpx;
                  color        : #333;
                  overflow     : hidden;
                  text-overflow: ellipsis;
                }
              }

              .i-right {
                display    : flex;
                align-items: center;

                text {
                  color: #666;
                }
              }
            }
          }
        }
      }
    }

    .m-list {
      .l-wrap {
        display  : flex;
        flex-wrap: wrap;

        .w-item {
          position  : relative;
          flex-basis: 50%;
          width     : 0;

          &:nth-child(2n + 1) {
            &::before {
              position    : absolute;
              content     : '';
              top         : 0;
              right       : 0;
              height      : 100%;
              width       : 0;
              border-right: 1rpx solid @border-color-split;
              transform   : scaleX(0.5);
            }
          }
        }
      }
    }
  }
}